<template>
  <div>
    <div class="container">
        <!-- logo和搜索 -->
        <LogoSearch/>

        <!-- 三级菜单 -->
        <TypeNav/>
    </div>

    <!-- 中间部分 -->
    <div style="background-color: #f6f6f6; height: 100%">
      <div class="middleon">
        <div class="middle">
          <!-- 标题栏 -->
          <div class="middleup">
            <a href="javascript::">
              <h5>北京美食&gt;日本菜&gt;朝阳区&gt;三里屯/工体&gt;宝屋日料</h5>
            </a>
          </div>
          <!-- 详情区 -->

          <div class="middlein">
            <div class="shopname">
              <h1>宝屋日料</h1>
              <span>▼&nbsp;手机扫码&nbsp;优惠买单</span>
            </div>
            <div class="shopevaluate">
              <ul>
                <li>评分:4.9</li>
                &nbsp;
                <li>1658 条评价</li>
                &nbsp;
                <li>人均:1313元</li>
                &nbsp;
                <li>口味:4.9</li>
                &nbsp;
                <li>环境:4.9</li>
                &nbsp;
                <li>服务:4.9</li>
                &nbsp;
              </ul>
            </div>
            <div class="shopaddress">
              <ul>
                <li>地址:&nbsp;洪福科技园B座教研9</li>
              </ul>
            </div>
            <div class="shopphone">
              <ul>
                <li>电话:&nbsp;13866667777</li>
              </ul>
            </div>
            <div class="shopcharacteristic">
              <ul>
                <li>特色:</li>
              </ul>
            </div>
            <div class="shopinfo">
              <ul>
                <li>更多信息</li>
              </ul>
            </div>
            <div class="shopwirthe">
              <h2 @click="goDetail">写评价</h2>
              <img src="./image/图标.png" />
            </div>
          </div>

          <div class="middleright">
            <div class="middlerightphoto">
              <img src="./image/2.jpg" />
              <div class="words">
                <p>📷&nbsp;22173</p>
                <p>添加图片</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 菜品区 -->
        <div class="variety">
          <!-- 上方导航 -->
          <div class="varietyup">
            <span>推荐菜</span>
            <span>环境</span>
            <span>价目表</span>
            <span>官方相册</span>
            <span>食品安全档案</span>
          </div>
          <div class="init"></div>
          <div class="eat">
            <div class="eatup">
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
            </div>
            <div class="eatup">
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
              <div class="eatphone">
                <img src="./image/豪哥.png" />
                <p>豪哥搞钱</p>
              </div>
            </div>
            <span>
              <a href="javascript::">更多~</a>
            </span>
          </div>
        </div>
        <!-- 优惠卷 -->
        <div class="Discount">
          <img src="./image/优惠卷.png" alt="" />
        </div>
        <!-- 下方菜品 -->
        <div class="Discountdown">
          <div class="Discountdownin">
            <a href="##">
              <span>附近团购</span>
              <span>附近商户</span>
            </a>
            <div class="inittwo"></div>
            <div class="Discountphoto">
              <div class="Discountphotoin">
                <div class="Discountleft">
                  <img src="./image/6.jpg" />
                </div>
                <div class="Discountright">
                  <a href="##">北京龙虾</a>
                  <p>北京龙虾 非常好吃,欢迎来品尝来晚了就没有了..</p>
                </div>
              </div>
              <div class="Discountphotoin">
                <div class="Discountleft">
                  <img src="./image/5.jpg" />
                </div>
                <div class="Discountright">
                  <a href="##">北京龙虾</a>
                  <p>北京龙虾 非常好吃,欢迎来品尝来晚了就没有了..</p>
                </div>
              </div>
              <div class="Discountphotoin">
                <div class="Discountleft">
                  <img src="./image/4.jpg" />
                </div>
                <div class="Discountright">
                  <a href="##">北京龙虾</a>
                  <p>北京龙虾 非常好吃,欢迎来品尝来晚了就没有了..</p>
                </div>
              </div>
              <div class="Discountphotoin">
                <div class="Discountleft">
                  <img src="./image/3.jpg" />
                </div>
                <div class="Discountright">
                  <a href="##">北京龙虾</a>
                  <p>北京龙虾 非常好吃,欢迎来品尝来晚了就没有了..</p>
                </div>
              </div>
              <div class="Discountphotoin">
                <div class="Discountleft">
                  <img src="./image/lx.webp" />
                </div>
                <div class="Discountright">
                  <a href="##">北京龙虾</a>
                  <p>北京龙虾 非常好吃,欢迎来品尝来晚了就没有了..</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 下方评论 -->
        <div class="comment">
          <div class="commentin">
            <div class="commentinput">
              <span>网友评论(2289)</span>
              <div class="commentinputin">
                <input placeholder="搜索评价" type="text" />
              </div>
            </div>

            <div class="commentdown">
              <div class="commentdownleft">
                <div>大家认为</div>
              </div>
              <div class="commentdownright">
                <div>
                  <a href="##">停车方便(20)</a>
                </div>
                <div>
                  <a href="##">菜品健康(70)</a>
                </div>
                <div>
                  <a href="##">回头客(90)</a>
                </div>
                <div>
                  <a href="##">深夜食堂(87)</a>
                </div>
                <div>
                  <a href="##">朋友聚餐(78)</a>
                </div>
                <div>
                  <a href="##">店内消毒(6)</a>
                </div>
                <div>
                  <a href="##">上菜块(10)</a>
                </div>
                <div>
                  <a href="##">茶品(9)</a>
                </div>
                <div>
                  <a href="##">小吃(5)</a>
                </div>
                <div>
                  <a href="##">服务热情(43)</a>
                </div>
              </div>
            </div>
            <!-- 选择区 -->
            <div class="choice">
              <div class="choicein">
                <span>
                  <input type="radio" checkbox />
                  <i>全部</i>
                </span>
                <span>
                  <input type="radio" checkbox />
                  <i>图片(1212)</i>
                </span>
                <span>
                  <input type="radio" checkbox />
                  <i>好评(323)</i>
                </span>
                <span>
                  <input type="radio" checkbox />
                  <i>中评(43)</i>
                </span>
                <span>
                  <input type="radio" checkbox />
                  <i>差评(19)</i>
                </span>
              </div>
            </div>

            <!-- 评论区 -->
            <div class="commentArea" v-for="(item,index) in localCommentArr" :key="index">
              <div class="commentAreaphoto">
                <img src="./image/豪哥.png" />
              </div>
              <div class="commentAreaId">
                <p>月黑风高时</p>
                <p class="commentAreaIdp">★★★★★</p>
              </div>
              <div class="commentAreawrite">
                <p>
                  过节了,说个美食.<br />
                  北京美食点也越来越多了,很多都在走小而精的路子.<br />
                  事实上,日料就是要小而精.<br />
                  连锁是为了规模,为了效益,牺牲的是品质.<br />
                  宝哥就开....<br />
                  {{item.content}}<br />
                  人均价格：￥{{item.avgPrice}}<br />
                </p>
                <span>展开评论~</span>
              </div>
              <div class="commentAreaimg">
                <img src="./image/3.jpg" />
                <img src="./image/4.jpg" />
                <img src="./image/5.jpg" />
                <img src="./image/6.jpg" />
                <img src="./image/7.jpg" />
              </div>
              <div class="commentAreadata">
                <p>
                  <span>2021-09-25&nbsp;12:06</span>&nbsp;&nbsp;
                  <span>宝屋日料</span>
                  <span class="commentAreaDz">
                    赞(10)&nbsp;&nbsp;回应&nbsp;&nbsp;收藏&nbsp;&nbsp;投诉
                  </span>
                </p>
              </div>
            </div>
            <hr />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Detail",
        data(){
          return {
            localCommentArr:[]
          }
        },
        methods:{
          goDetail(){
            this.$router.push('/evaluate')
          }
        },mounted(){
          this.localCommentArr=JSON.parse(localStorage.getItem('pingjia'));
        }
    };
</script>

<style lang="css" scoped>
.container .headeron {
  height: 37px;
  background: #eaeaea;
}
.header-wrap {
  height: 36px;
  background: #f6f6f6;
}

.header {
  width: 1200px;
  height: 36px;
  background: #f6f6f6;
  margin: 0 auto;
}

.header .header-left {
  float: left;
  background: #f6f6f6;
}

.header .header-left li {
  float: left;
  height: 36px;
  line-height: 36px;
}
.header .header-left li:first-child {
  position: relative;
}
.header .header-left li:first-child a {
  display: block;
  padding: 0 2px;
  height: 35px;
  line-height: 35px;
  border: 1px solid transparent;
  border-bottom: none;
}
.header .header-left li:first-child span {
  float: left;
  margin-left: 5px;
}
.header .header-left li:first-child a {
  float: left;
}
/* 伪类选择器（天才选择器） */
.header .header-left .two {
  margin: 0 8px 0 9px;
}
.header .header-right {
  float: right;
  background: #f6f6f6;
}

.header .header-right li {
  float: right;
  height: 36px;
  line-height: 36px;
  display: block;
}

.header .header-right .line {
  width: 1px;
  height: 16px;
  background: #b3aeae;
  margin: 10px 13px 0px 13px;
}

.header .header-right .xlk a {
  display: block;
  position: relative;
  left: 0;
  top: 0;
  height: 35px;
  border: 1px solid transparent;
  border-bottom: none;
  z-index: 2;
}

.header .header-right .xlk a div {
  background: #f6f6f6;
  position: absolute;
  width: 90px;
  left: -10px;
  top: 34px;

  display: none;
}
.header .header-right .xlk a div ul {
  display: flex;
  flex-direction: column;
}
.header .header-right .xlk a div ul li {
  margin: 0 auto;
}
.header .header-right .xlk a:hover {
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
  /* border-bottom: none; */
}

.header .header-right .xlk a:hover > div {
  display: block;
  z-index: 0;
}
.logoandsearch-wrap {
  height: 106px;
  background: #fff;
}
.logoAndSearch {
  width: 1200px;
  height: 106px;
  background: #fff;
  margin: 0 auto;
  position: relative;
}
.logoAndSearch .logo {
  float: left;
  width: 210px;
  margin: 25px 0 0 0px;
}

/* 搜索样式 */
.Search {
  width: 1200px;
  height: 75px;
  margin: 20px auto 5px;
}
.Search .logo-container {
  float: left;
  margin-left: 70px;
  margin-top: 15px;
}
.Search .logoimage {
  width: 210px;
  height: 57px;
  display: inline;
  margin: 0;
  float: left;
}
.Search .logoimage img {
  width: 210px;
  height: 57px;
  display: inline;
  margin: 0;
  float: left;
}
.Search .logoinput {
  width: 402px;
  height: 36px;
  border: 1px solid #ff6633;
  position: relative;
  background: url(./image/fang.png) no-repeat 5px center;
  padding-left: 30px;
}
.Search .logonbutton {
  width: 120px;
  height: 36px;
  color: #fff;
  background-color: #ff6633;
  border: 1px solid #ff6633;
  margin: 0px 10px 0px -3px;
}
.Search .logonbuttonbottom {
  width: 120px;
  height: 36px;
  color: #ff6633;
  background-color: #eee;
  border: 1px solid #ff6633;
}

/* 三级菜单 */
.type-nav {
  border-bottom: 2px solid #ff6633;
}
.type-nav .container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.type-nav .container .all {
  width: 210px;
  height: 45px;
  background-color: #ff6633;
  line-height: 45px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.type-nav .container .nav a {
  height: 45px;
  margin: 0 22px;
  line-height: 45px;
  font-size: 16px;
  color: #333;
}
.type-nav .container .sort {
  left: 0;
  top: 45px;
  width: 210px;
  height: 100%;
  position: absolute;
  background: #eee;
  z-index: 999;
  display: none;
}
.type-nav .container:hover .sort {
  display: block;
}
.type-nav .container .sort .all-sort-list2 .item h3 {
  line-height: 30px;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  margin: 0;
}
.type-nav .container .sort .all-sort-list2 {
  background: #eee;
}
.type-nav .container .sort .all-sort-list2 .item h3 a {
  color: #333;
}
.type-nav .container .sort .all-sort-list2 .item .item-list {
  display: none;
  position: absolute;
  width: 734px;
  min-height: 460px;
  background: #eee;
  left: 210px;
  top: 0;
  z-index: 9999 !important;
}
.type-nav .container .sort .all-sort-list2 .item .item-list .subitem {
  float: left;
  width: 650px;
  padding: 0 4px 0 8px;
}
.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl {
  border-top: 1px solid #ff6633;
  padding: 6px 0;
  overflow: hidden;
  zoom: 1;
}
.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl.fore {
  border-top: 0;
}
.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl dt {
  float: left;
  width: 54px;
  line-height: 22px;
  text-align: right;
  padding: 3px 6px 0 0;
  font-weight: 700;
}
.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl dd {
  float: left;
  width: 415px;
  padding: 3px 0 0;
  overflow: hidden;
}
.type-nav .container .sort .all-sort-list2 .item .item-list .subitem dl dd em {
  float: left;
  height: 14px;
  line-height: 14px;
  padding: 0 8px;
  margin-top: 5px;
  border-left: 1px solid #ff6633;
}
.type-nav .container .sort .all-sort-list2 .item:hover .item-list {
  display: block;
}

/* 中间部分 */
.middleon {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  background-color: #f6f6f6;
  position: relative;
}
.middle {
  background: #fff;
  width: 870px;
  height: 300px;
  position: relative;
}
.middle .middleup {
  width: 1200px;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  color: #282828;
  cursor: pointer;
  background-color: #f6f6f6;
}
.middle .middlein {
  width: 871px;
  height: 257px;
  margin-left: 14px;
}
.middlein .shopname {
  width: 829px;
  height: 33px;
  line-height: 33px;
}
.middlein .shopname h1 {
  color: #333;
  font-size: 20px;
  display: block;
  float: left;
}
.middlein .shopname span {
  color: #ff6633;
  font-size: 16px;
  margin-left: 2px;
  background-color: #ffe9ee;
}
.middlein .shopevaluate {
  width: 829px;
  height: 24px;
  line-height: 24px;
  color: #666;
}
.middlein .shopevaluate ul li:first-child {
  color: red;
}
.middlein .shopevaluate ul {
  float: left;
}
.middlein .shopevaluate ul li {
  display: inline;
  font-size: 14px;
}
.middlein .shopaddress {
  width: 829px;
  height: 28px;
  line-height: 28px;
  float: left;
  font-size: 14px;
  color: #666;
}
.middlein .shopphone {
  width: 829px;
  height: 21px;
  line-height: 21px;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}
.middlein .shopcharacteristic {
  width: 829px;
  height: 21px;
  line-height: 21px;
  float: left;
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}
.middlein .shopinfo {
  width: 829px;
  height: 35px;
  line-height: 35px;
  float: left;
  font-size: 4px;
  color: #666;
  margin-top: 10px;
  margin-bottom: 20px;
}
.middlein .shopwirthe {
  width: 824px;
  height: 40px;
  position: relative;
}
.middlein .shopwirthe h2 {
  background-color: #ff6633;
  color: #eee;
  width: 80px;
  font-size: 16px;
  display: inline;
  padding: 6px;
}
.middlein .shopwirthe img {
  width: 136px;
  position: absolute;
  top: 140px;
  left: 662px;
}
.middle .middleright {
  width: 312px;
  height: 257px;
  position: absolute;
  top: 42px;
  right: -322px;
  border: 1px solid #f6f6f6;
  background-color: #fff;
}
.middleright .middlerightphoto {
  width: 280px;
  height: 218px;
  border: 1px solid #f6f6f6;
  margin: 8px auto;
}
.middleright .middlerightphoto img {
  width: 270px;
  height: 180px;
  margin: 6px auto;
}
.middleright .middlerightphoto .words {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

/* 菜品区 */
.middleon .variety {
  width: 870px;
  height: 334px;
  background-color: #fff;
  margin-top: 10px;
  padding-top: 10px;
}
.middleon .variety .varietyup {
  width: 830px;
  height: 38px;
  margin: 0 auto;
  line-height: 38px;
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  padding-left: 10px;
}
.middleon .variety .init {
  width: 830px;
  height: 1px;
  border-top: 1px solid #f6f6f6;
  margin-top: 10px;
  margin-left: 10px;
}
.middleon .variety .eat {
  width: 830px;
  height: 236px;
  margin-top: 10px;
  margin-left: 10px;
  padding-top: 10px;
  position: relative;
}
.middleon .variety .eat .eatup {
  width: 810px;
  height: 110px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.middleon .variety .eat .eatup .eatphone {
  width: 93px;
  height: 98px;
  margin-top: 5px;
  border: 1px solid #f6f6f6;
}
.middleon .variety .eat .eatup .eatphone img {
  width: 93px;
  height: 69px;
  padding-bottom: 6px;
}
.middleon .variety .eat .eatup .eatphone p {
  text-align: center;
}
.middleon .variety .eat span {
  width: 41px;
  height: 18px;
  position: absolute;
  right: 0;
  bottom: 0;
}
/* 优惠卷 */
.middleon .Discount {
  width: 310px;
  height: 175px;
  position: absolute;
  top: 310px;
  right: 10px;
}
.middleon .Discount img {
  width: 310px;
  height: 175px;
}
/* 下方菜品 */
.middleon .Discountdown {
  width: 310px;
  height: 478px;
  position: absolute;
  top: 500px;
  right: 10px;
  background-color: #fff;
}
.middleon .Discountdown .Discountdownin {
  width: 278px;
  height: 448px;
  margin: 15px 20px 15px 20px;
}
.middleon .Discountdown .Discountdownin a {
  font-weight: 700;
  font-size: 18px;
}
.middleon .Discountdown .Discountdownin .inittwo {
  margin-top: 15px;
  width: 278px;
  border: 1px solid #f6f6f6;
}
.middleon .Discountdown .Discountdownin .Discountphoto {
  width: 270px;
  height: 385px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.middleon .Discountdown .Discountdownin .Discountphoto .Discountphotoin {
  float: left;
  margin-top: 10px;
}
.middleon .Discountdown .Discountdownin .Discountphoto img {
  width: 93px;
  height: 69px;
  float: left;
}
.middleon .Discountdown .Discountdownin .Discountphoto .Discountright {
  padding-top: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.middleon .Discountdown .Discountdownin .Discountphoto .Discountright a {
  font-weight: 400;
  font-size: 14px;
  display: block;
  margin-left: 10px;
}
.middleon .Discountdown .Discountdownin .Discountphoto .Discountright p {
  display: block;
  margin-left: 10px;
  margin-top: 15px;
  white-space: nowrap;
}
/* 评论区 */
.middleon .comment {
  width: 870px;
  height: 900px;
  margin-top: 10px;
  padding-top: 10px;
  background-color: #fff;
}
.middleon .comment .commentin {
  width: 830px;
  height: 900px;

  margin: 0 auto;
}
.middleon .comment .commentin .commentinput {
  width: 830px;
  height: 43px;
  line-height: 43px;
}
.middleon .comment .commentin .commentinput span {
  font-size: 20px;
  font-weight: 700px;
  float: left;
}
.middleon .comment .commentin .commentinput .commentinputin input {
  float: right;
  width: 150px;
  height: 28px;
  margin-top: 10px;
  margin-right: 10px;
  border: 1px solid #f6f6f6;
}
.middleon .comment .commentdown {
  width: 830px;
  height: 100px;
  margin-top: 22px;
  position: relative;
  background-color: #f6f6f6;
}
.middleon .comment .commentdown .commentdownleft {
  width: 47px;
  height: 100px;
  padding-top: 10px;
  border-right: 1px solid #fbfbfb;
}
.middleon .comment .commentdown .commentdownleft div {
  width: 16px;
  height: 64px;
  white-space: pre-wrap;
  margin-left: 15px;
}
.middleon .comment .commentdown .commentdownright {
  width: 767px;
  height: 80px;
  position: absolute;
  left: 56px;
  top: 12px;
  display: flex;
  flex-wrap: wrap;
  background-color: #f6f6f6;
}
.middleon .comment .commentdown .commentdownright div {
  width: 88px;
  height: 22px;
  border: 1px solid #f6f6f6;
  line-height: 22px;
  margin-left: 35px;
  margin-top: 10px;
  background-color: #fff;
}
.middleon .comment .commentdown .commentdownright div a {
  color: #f63;
}
.commentin .choice {
  width: 830px;
  height: 56px;
  margin-top: 10px;
  padding-left: 19px;
  padding-top: 10px;
}
.commentin .choice .choicein {
  width: 811px;
  height: 26px;
}
.commentin .choice .choicein span {
  height: 26px;
  width: 100%;
  line-height: 26px;
  margin-right: 15px;
}

.commentin .choice .choicein i {
  list-style: none;
}
/* 评论区 */
.commentin .commentArea {
  width: 830px;
  height: 360px;
  position: relative;
}
.commentin .commentArea .commentAreaphoto {
  width: 80px;
}
.commentin .commentArea .commentAreaphoto img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.commentin .commentArea .commentAreaId {
  width: 750px;
  height: 21px;
  color: #282828;
  font-size: 14px;
  position: absolute;
  top: 0;
  right: 0;
}
.commentin .commentArea .commentAreaId .commentAreaIdp {
  width: 68px;
  height: 12px;
  color: #f63;
  margin-top: 6px;
}
.commentin .commentArea .commentAreawrite {
  width: 750px;
  height: 148px;
  position: absolute;
  top: 48px;
  right: 0;
  font-size: 14px;
  color: #282828;
  line-height: 20px;
}
.commentin .commentArea .commentAreawrite span {
  width: 66px;
  height: 18px;
  color: #999;
  font-size: 12px;
  margin-top: 24px;
  margin-left: 650px;
  display: block;
}
.commentin .commentArea .commentAreaimg {
  width: 750px;
  height: 96px;
  position: absolute;
  top: 196px;
  right: 0px;
}
.commentin .commentArea .commentAreaimg img {
  width: 96px;
  height: 96px;
  margin-left: 10px;
  float: left;
}
.commentin .commentArea .commentAreadata {
  width: 750px;
  height: 20px;
  font-size: 12px;
  position: absolute;
  color: #8c8c8c;
  right: 0px;
  bottom: 35px;
}
.commentin .commentArea .commentAreadata .commentAreaDz {
  font-size: 13px;
  margin-left: 420px;
  width: 200px;
  height: 20px;
  line-height: 20px;
}
.clearfix:aftert {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
}
</style>
